<template>
    <div>
        <!-- <div class="myheader">
      <el-input
        v-model="listQuery.name"
        placeholder="姓名"
        style="width: 200px;left: 10px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >创建员工</el-button>
    </div> -->
        <el-table :data="tableData" border fit style="margin: 0px auto; width: 98.5%">
            <el-table-column align="center" prop="id" label="id" width="50" />
            <!-- <el-table-column align="center" prop="img_url" label="照片" /> -->
            <el-table-column align="center" prop="sname" label="姓名" />
            <!-- <el-table-column align="center" prop="sex" label="性别" /> -->
            <!-- <el-table-column align="center" prop="nation" label="民族" /> -->
            <!-- <el-table-column align="center" prop="card" label="身份证号" /> -->
            <!-- <el-table-column align="center" prop="address" label="地址" /> -->
            <el-table-column align="center" prop="dname" label="部门" />
            <!-- <el-table-column align="center" prop="phone" label="手机号" /> -->
            <!-- <el-table-column align="center" prop="sos_name" label="紧急联系人" /> -->
            <!-- <el-table-column align="center" prop="sos_ship" label="紧急联系人关系" /> -->
            <!-- <el-table-column align="center" prop="sos_phone" label="紧急联系人电话" /> -->
            <el-table-column align="center" prop="conversion_time" label="兑换时间" />
            <el-table-column align="center" prop="send_active" label="派送状态" />
            <!-- <el-table-column align="center" prop="end" label="剩余积分" /> -->

            <!-- <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button
            v-if="row.status!='deleted'"
            size="mini"
            type="danger"
            @click="del_address(row)"
          >删除</el-button>
        </template>
      </el-table-column> -->
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getTableData"
        />

        <el-dialog :visible.sync="dialogPvVisible" :title="dialogStatus == 'create' ? '添加员工信息' : '修改员工信息'">
            <el-form
                ref="dataForm"
                :rules="rules"
                :model="temp"
                label-position="left"
                label-width="100px"
                style="width: 400px; margin-left: 50px"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="temp.name" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="temp.sex" />
                </el-form-item>
                <el-form-item label="民族" prop="nation">
                    <el-input v-model="temp.nation" />
                </el-form-item>
                <el-form-item label="身份证号" prop="card">
                    <el-input v-model="temp.card" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="temp.address" />
                </el-form-item>
                <div style="width: 600px; height: 40px; margin-left: 8px; margin-bottom: 15px">
                    <span
                        style="
                            height: 40px;
                            line-height: 40px;
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.7);
                            width: 92px;
                            display: block;
                            float: left;
                        "
                        >部门</span
                    >
                    <el-select v-model="temp.department_id" filterable placeholder="请选择" style="float: left">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div style="width: 600px; height: 40px; margin-left: 8px; margin-bottom: 15px">
                    <span
                        style="
                            height: 40px;
                            line-height: 40px;
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.7);
                            width: 92px;
                            display: block;
                            float: left;
                        "
                        >工种</span
                    >
                    <el-select v-model="temp.worktype_id" filterable placeholder="请选择" style="float: left">
                        <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="temp.phone" />
                </el-form-item>
                <el-form-item label="紧急联系人" prop="sos_name">
                    <el-input v-model="temp.sos_name" />
                </el-form-item>
                <el-form-item label="紧急联系人关系" prop="sos_ship">
                    <el-input v-model="temp.sos_ship" />
                </el-form-item>
                <el-form-item label="紧急联系人电话" prop="sos_phone">
                    <el-input v-model="temp.sos_phone" />
                </el-form-item>

                <el-form-item label="入职时间" prop="history">
                    <el-input v-model="temp.history" />
                </el-form-item>
                <el-form-item class="pic" style="height: 70px" label="照片" prop="picture">
                    <el-upload
                        v-model="temp.img_url"
                        class="avatar-uploader"
                        action="http://192.168.1.106:8800/staff/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPvVisible = false">取消</el-button>
                <el-button type="primary" :loading="btnloading" @click="dialogStatus === 'create' ? createData() : updateData()"
                    >确定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.$message(res);
            this.temp.img_url = res;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        getTableData1() {
            let me = this;

            ajax('department/select_department', {}, function (data) {
                me.options = data;
                // console.log(data);
            });
        },
        getTableData2() {
            let me = this;

            ajax('worktype/select_worktype', {}, function (data) {
                me.options1 = data;
                // console.log(data);
            });
        },
        getList() {
            var me = this;
            ajax('conversion/find_conversion', this.listQuery, function (data) {
                me.tableData = data.items;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleUpdate(row) {
            this.dialogStatus = 'update';
            this.dialogPvVisible = true;
            this.temp = Object.assign({}, row); // copy obj
            // 当更改data中数据后，得到更新后的DOM
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate();
            });
        },
        del_address(row) {
            var me = this;
            this.$confirm('永久删除该部门, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ajax('staff/del_staff', { id: row.id }, function (data) {
                        if (data == 1) {
                            me.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            me.getTableData();
                        } else {
                            me.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        resetTemp() {
            this.temp = {
                img_url: '',
                nation: '',
                card: '',
                address: '',
                name: '',
                id: '',
                sex: '',
                departmentname: '',
                phone: '',
                sos_name: '',
                sos_ship: '',
                sos_phone: '',
                worktypename: '',
                history: ''
            };
        },
        getTableData() {
            var me = this;
            ajax('conversion/find_conversion', this.listQuery, function (data) {
                me.dialogPvVisible = false;
                me.tableData = data.items;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('staff/upd_staff', this.temp, function (data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        });
                        me.resetTemp();
                    });
                }
            });
        },
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('staff/add_staff', this.temp, function (data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                    });
                }
            });
        },
        handleCreate() {
            this.dialogStatus = 'create';
            this.dialogPvVisible = true;
            this.resetTemp();
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate(); //清除验证
            });
        }
    },

    data() {
        return {
            imageUrl: '',
            options: [],
            options1: [],
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                img_url: ''
            },
            total: 100,
            rules: {
                img_url: [{ required: true, message: '照片不能为空！', trigger: 'blur' }],
                nation: [{ required: true, message: '民族不能为空！', trigger: 'blur' }],
                sex: [{ required: true, message: '性别不能为空！', trigger: 'blur' }],
                card: [{ required: true, message: '身份证号不能为空！', trigger: 'blur' }],
                address: [{ required: true, message: '地址不能为空！', trigger: 'blur' }],
                departmentname: [{ required: true, message: '部门不能为空！', trigger: 'blur' }],
                phone: [{ required: true, message: '手机号不能为空！', trigger: 'blur' }],
                sos_name: [{ required: true, message: '紧急联系人不能为空！', trigger: 'blur' }],
                sos_ship: [{ required: true, message: '紧急联系人关系不能为空！', trigger: 'blur' }],
                sos_phone: [{ required: true, message: '紧急联系人电话不能为空！', trigger: 'blur' }],
                worktypename: [{ required: true, message: '工种不能为空！', trigger: 'blur' }],
                history: [{ required: true, message: '入职时间不能为空！', trigger: 'blur' }],
                name: [{ required: true, message: '姓名不能为空！', trigger: 'blur' }],
                address: [{ required: true, message: '详细地址不能为空！', trigger: 'blur' }],
                id: [{ required: true, message: 'id不能为空！', trigger: 'blur' }]
            },
            temp: {
                img_url: '',
                nation: '',
                card: '',
                address: '',
                departmentname: '',
                phone: '',
                sos_name: '',
                sos_ship: '',
                sos_phone: '',
                worktypename: '',
                createtime: '',
                name: '',
                sex: '',
                id: ''
            },
            dialogStatus: 'create',
            dialogPvVisible: false,
            tableData: [],
            btnloading: false
        };
    },
    created() {
        var me = this;
        me.getTableData();
        me.getList();
        me.getTableData1();
        me.getTableData2();
    }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.pic >>> .el-upload--text {
    width: 180px;
}
</style>